<template>
  <div class="course-container">
    <!-- 搜索与筛选区域 -->
    <div class="search-filter-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索课程名称或教师"
        prefix-icon="el-icon-search"
        style="width: 300px;"
        @input="filterCourses"
      />
      
      <el-select
        v-model="selectedCredit"
        placeholder="筛选学分"
        clearable
        style="width: 160px; margin-left: 15px;"
        @change="filterCourses"
      >
        <el-option
          v-for="credit in 10"
          :key="credit"
          :label="credit + ' 学分'"
          :value="credit"
        />
      </el-select>
    </div>
    <!-- 课程表格 -->
    <el-table
      :data="filteredCourses"
      border
      style="width: 100%; margin-top: 15px;"
      header-cell-class-name="table-header"
    >
      <el-table-column
        prop="id"
        label="课程ID"
        width="100"
        align="center"
      />
      <el-table-column
        prop="name"
        label="课程名称"
        min-width="200"
      />
      <el-table-column
        prop="teacher"
        label="授课教师"
        min-width="150"
      />
      <el-table-column
        prop="credit"
        label="学分"
        width="100"
        align="center"
      />
      <el-table-column
        label="操作"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(scope.row)"
            style="margin-left: 5px;"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑课程信息"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        label-width="80px"
        :rules="formRules"
      >
        <el-form-item label="课程ID">
          <el-input v-model="editForm.id" disabled />
        </el-form-item>
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="授课教师" prop="teacher">
          <el-input v-model="editForm.teacher" />
        </el-form-item>
        <el-form-item label="学分" prop="credit">
          <el-input
            v-model.number="editForm.credit"
            type="number"
            min="1"
            max="10"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'CourseList',
  data() {
    return {
      // 原始课程数据，修改为图片中的课程
      courseList: [
        { id: 1, name: 'JAVA高级编程', teacher: '王老师', credit: 5 },
        { id: 2, name: '数据库原理', teacher: '李老师', credit: 4 },
        { id: 3, name: '前端开发技术基础', teacher: '康老师', credit: 3 },
        { id: 4, name: '前端开发技术高级', teacher: '赵老师', credit: 4 },
        { id: 5, name: '项目配置与管理', teacher: '刘老师', credit: 3 }
      ],
      // 筛选后的数据
      filteredCourses: [],
      // 搜索和筛选参数
      searchQuery: '',
      selectedCredit: '',
      // 编辑弹窗相关
      dialogVisible: false,
      editForm: {
        id: '',
        name: '',
        teacher: '',
        credit: 0
      },
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        teacher: [
          { required: true, message: '请输入教师姓名', trigger: 'blur' }
        ],
        credit: [
          { required: true, message: '请输入学分', trigger: ['blur', 'change']},
          { type: 'number', message: '学分必须是数字', trigger:['blur', 'change']},
          { min: 1, max: 10, message: '学分必须在1 - 10之间', trigger:['blur', 'change']}
        ]
      }
    }
  },
  watch: {
    // 监听原始数据变化，同步更新筛选结果
    courseList: {
      handler() {
        this.filterCourses()
      },
      immediate: true
    }
  },
  methods: {
    // 筛选课程数据
    filterCourses() {
      let result = [...this.courseList]
      
      // 搜索筛选（名称或教师）
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(item => 
          item.name.toLowerCase().includes(query) || 
          item.teacher.toLowerCase().includes(query)
        )
      }
      
      // 学分筛选
      if (this.selectedCredit) {
        result = result.filter(item => item.credit === this.selectedCredit)
      }
      
      this.filteredCourses = result
    },
    
    // 编辑课程
    handleEdit(row) {
      this.editForm = { ...row }
      this.dialogVisible = true
    },
    
    // 提交编辑
    submitEdit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const index = this.courseList.findIndex(item => item.id === this.editForm.id)
          if (index !== -1) {
            this.courseList.splice(index, 1, { ...this.editForm })
            this.$message.success('修改成功！')
            this.dialogVisible = false
          }
        } else {
          this.$message.error('表单验证失败，请检查输入内容')
        }
      })
    },
    
    // 删除课程
    handleDelete(row) {
      this.$confirm(`确定要删除课程【${row.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.courseList = this.courseList.filter(item => item.id !== row.id)
        this.$message.success('删除成功！')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>
<style scoped>
.course-container {
  padding: 20px;
}
.search-filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
/* 表头样式 */
::v-deep .table-header {
  background-color: #42b983; /* 绿色表头 */
  color: white;
  font-weight: bold;
}
/* 表格单元格padding调整 */
::v-deep .el-table th,
::v-deep .el-table td {
  padding: 12px 0;
}
</style>